<template>
  <div class="app-container">
    <!-- :buttons="[{name:'新建自定义模板'}]" -->
    <common-table
      :has-new="false"
      :has-delete="false"
      :has-modify="false"
      :colnames="colnames"
      :list-data="listData"
      :list-loading="listLoading"
      :is-multiple="isMultiSelect"
      :custom-buttons="customButtons"
      @fetchData="fetchData"
      @itemNew="itemNew"
      @itemEdit="itemEdit"
      @itemDelete="itemDelete"
      @onCustomButtonClick="onCustomButtonClick"
      @selectChange="onSelectChange"
    >
      <!-- <template v-slot:leftPannel>
        <el-button type="primary" size="mini" :disabled="selectedItems.length===0" @click="markReaded(true)">标记已读</el-button>
        <el-button type="default" size="mini" :disabled="selectedItems.length===0" @click="markReaded(false)">标记未读</el-button>
      </template> -->
      <template v-slot:filter>
        <el-select
          v-model="logType"
          placeholder="请选择日志类型"
          clearable
          style="margin-right: 5px;"
          size="mini"
        >
          <el-option label="全部" value="all" />
          <el-option label="异常日志" value="exception" />
          <el-option label="通知日志" value="notification" />
          <el-option label="操作日志" value="operation" />
        </el-select>
        <el-date-picker
          v-model="listQuery.createTime"
          type="datetimerange"
          clearable
          style="margin-right: 5px;"
          size="mini"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          placeholder="选择时间范围"
        />
        <el-select
          v-model="listQuery.messageAcknowledged"
          placeholder="请选择状态"
          clearable
          style="margin-right: 5px;"
          size="mini"
        >
          <el-option label="已读" :value="1" />
          <el-option label="未读" :value="0" />
        </el-select>

        <el-input v-model="listQuery.messagePayload" placeholder="请输入日志" clearable class="etag" size="mini" />
        <el-input v-model="listQuery.etagImei" placeholder="IMEI编号" clearable class="etag" size="mini" />
        <el-input v-model="listQuery.stationName" placeholder="请输入场站" clearable class="etag" size="mini" />
        <el-button type="primary" size="mini" class="ml5" @click="fetchData(listQuery)">查询</el-button>
        <!-- <el-button type="default" size="mini" class="ml5" @click="exportData(listQuery)">导出</el-button> -->
      </template>
    </common-table>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="40%"
      destroy-on-close
    >
      <log-edit
        :edit-type="editType"
        :values="editValues"
        :readonly="!hasModify"
        @onCancel="dialogVisible = false"
        @onSubmit="onSubmit"
      />
    </el-dialog>

  </div>
</template>

<style scoped>
.etag {
  width: 170px;
  margin-right: 5px;
}
</style>

<script>
import { mapGetters } from 'vuex'
import CommonTable from '../commontable'
import LogEdit from './edit'
import { getLogList, batchPutLog /*, getLogUnreadCount*/ } from '@/api/log'
import apiDefines from '../commontable/apidefines'
import { mergeQuerrys } from '@/utils'

export default {
  name: 'PriceLog',
  components: { CommonTable, LogEdit },
  data() {
    return {
      customButtons: [
        // { name: '按钮1', type: 'primary', data: { priceType: 2 }},
        // { name: '按钮2', type: 'default', isMultiSelect: false, data: {}}
      ],
      colnames: [
        { displayName: '序号', colName: 'id', dataType: 'indexNo', colWidth: '64px' },
        // { displayName: '状态', colName: 'messageAcknowledged', dataType: 'tag', colWidth: '86px',
        //   data: {
        //     type: (row, col) => { return row.messageAcknowledged ? 'info' : '' }
        //   },
        //   formater: (col, item) => {
        //     return item.messageAcknowledged ? '已读' : '未读'
        //   } },
        { displayName: '日志', colName: 'messagePayload' },
        { displayName: '操作时间', colName: 'createTime', dataType: 'date', sortable: 'costom', colWidth: '150px' },
        { displayName: '场站名称', colName: 'stationName', colWidth: '150px' },
        { displayName: '分区名称', colName: 'sectionName' },
        { displayName: '价牌', colName: 'etagName' },
        { displayName: '价牌IMEI', colName: 'etagImei', colWidth: '150px' }
      ],
      editType: 'edit',
      editValues: {},
      listData: {},
      editRules: {},
      listLoading: false,
      isMultiSelect: true,
      dialogVisible: false,
      dialogTitle: '新建',
      stationName: '全部价格牌模板',
      listQuery: {},
      hasModify: false,
      selectedItems: [],
      logType: 'all'
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'name',
      'avatar',
      'roles'
    ])
  },
  created() {
    this.editCols = apiDefines.price.editCols
    this.editRules = apiDefines.price.editRules
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$route.params.stationName) {
        this.stationName = this.$route.params.stationName + ' 车位'
      }
    })
  },
  methods: {
    fetchData(listQuery) {
      this.listQuery = listQuery
      console.log('fetchData', listQuery)
      this.listLoading = true
      const keyDefs = [
        { key: 'createTime', matchType: 'timeFromTo' },
        { key: 'messageAcknowledged', matchType: 'match' },
        { key: 'messagePayload', matchType: 'like' },
        { key: 'etagImei', matchType: 'like' },
        { key: 'stationName', matchType: 'like' }
      ]
      getLogList(mergeQuerrys(keyDefs, listQuery), this.logType)
        .then(ret => {
          console.log('ret', ret)
          this.listData = ret.data
        }).finally(() => {
          this.listLoading = false
        })
      // 获取未读消息数
      // getLogUnreadCount().then(count => {
      //   this.$store.dispatch('sysLog/setSysLogCount', count)
      // })
    },
    itemNew() {
      console.log('price New')
    },
    itemEdit({ type, item, items }) {
      console.log('itemEdit')
    },
    itemDelete({ type, item, items }) {
      console.log('itemDelete')
    },
    onSelectChange({ type, item, items }) {
      this.selectedItems = items
    },
    onSubmit(formData) {
      console.log('onSubmit', formData)
    },
    onCustomButtonClick({ target, data }) {
      console.log('onCustomButtonClick', target)
    },
    exportData(listQuery) {
      this.$message({
        type: 'warning',
        message: '缺少接口'
      })
    },
    markReaded(isRead) {
      batchPutLog(this.selectedItems.map(v => {
        v.messageAcknowledged = !isRead
        return v
      })).then(ret => {
        console.log('markReaded ret:', ret)
        this.fetchData(this.listQuery)
      })
    }
  }
}
</script>
